"use client";

import { useAuthStore, Role } from '@/lib/authStore';
import { Button } from '@/components/ui/button';

interface RoleButtonProps {
  requiredRoles: Role[];
  children: React.ReactNode;
  fallback?: React.ReactNode;
  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
  size?: 'default' | 'sm' | 'lg' | 'icon';
  className?: string;
  onClick?: () => void;
}

export const RoleButton: React.FC<RoleButtonProps> = ({
  requiredRoles,
  children,
  fallback = null,
  ...buttonProps
}) => {
  const { hasAnyRole } = useAuthStore();

  if (!hasAnyRole(requiredRoles)) {
    return <>{fallback}</>;
  }

  return <Button {...buttonProps}>{children}</Button>;
}; 